<template>
  <div class="view-scroll-bar">
    <fx-card title="基础用法">
      <fx-scroll-bar height="300">
        <ul class="scroll-bar">
          <li v-for="item in 200" :key="item">{{ item }}</li>
        </ul>
      </fx-scroll-bar>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="最大高度">
      <div class="mb10">
        <fx-button @click="maxHeightArr++">添加</fx-button>
        <fx-button @click="maxHeightArr>0&&maxHeightArr--">删除</fx-button>
      </div>
      <fx-scroll-bar max-height="300">
        <ul class="scroll-bar">
          <li v-for="item in maxHeightArr" :key="item">{{ item }}</li>
        </ul>
      </fx-scroll-bar>
      <template #hide>
        <pre v-highlight="maxHeight"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义">
      <fx-scroll-bar max-height="300" bar-bg-color="#f00" :bar-width="2" :bar-margin="10" always>
        <ul class="scroll-bar">
          <li v-for="item in 100" :key="item">{{ item }}</li>
        </ul>
      </fx-scroll-bar>
      <template #hide>
        <pre v-highlight="own"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const maxHeightArr = ref<number>(4)

const base = `<fx-scroll-bar height="300">
  <ul class="scroll-bar">
    <li v-for="item in 200" :key="item">{{ item }}</li>
  </ul>
</fx-scroll-bar>`
const maxHeight = `<div class="mb10">
  <fx-button @click="maxHeightArr++">添加</fx-button>
  <fx-button @click="maxHeightArr>0&&maxHeightArr--">删除</fx-button>
</div>
<fx-scroll-bar max-height="300">
  <ul class="scroll-bar">
    <li v-for="item in maxHeightArr" :key="item">{{ item }}</li>
  </ul>
</fx-scroll-bar>`
const own = `<fx-scroll-bar max-height="300" bar-bg-color="#f00" :bar-width="2" :bar-margin="10" always>
  <ul class="scroll-bar">
    <li v-for="item in 100" :key="item">{{ item }}</li>
  </ul>
</fx-scroll-bar>`
</script>

<style scoped lang="scss">
.scroll-bar {
  > li {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    background-color: rgba(45, 183, 245, 0.5);
    margin-bottom: 20px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
</style>
